<template>
  <div class="groupSendContainer flex-column">
    <header-tabs :tabs="tabs">
      <!-- <button class="layui-btn layui-btn-normal" @click="oepnSendSetting">发送设置</button> -->
    </header-tabs>
    <router-view :intervalTime="intervalTime" :intervalCount="intervalCount">
    </router-view>
    <custom-dialog
      v-if="showSettingDialog"
      :closeDialog="closeDialog"
      @submit="submitSetting"
      :showBtn="true"
      title="发送设置"
      wrapClass="groupSendSettingDialog">
      <div class="flex-column">
        <div class="settingItem">
          <span>每发送一个 人/群 &emsp;&nbsp;间隔</span>
          <input type="tel" class="layui-input" v-model="intervalTime">
          <span>分钟</span>
        </div>
        <div class="settingItem stopTime">
          <span>每发送</span>
          <input type="tel" class="layui-input" v-model="intervalCount">
          <span>好友/群&nbsp;&nbsp;暂停</span>
          <input type="tel" class="layui-input" v-model="stopTime">
          <span>分钟</span>
        </div>
        <div class="settingItem sleepTime">
          <span>休眠时间</span>
          <input type="tel" class="layui-input" id="startTime">
          <div class="layui-form-mid">-</div>
          <input type="tel" class="layui-input" id="endTime">
        </div>
      </div>
    </custom-dialog>
  </div>
</template>
<script>
import CustomDialog from '@/components/customDialog';
import HeaderTabs from '@/components/headerTabs';

export default {
  data() {
    return {
      showSettingDialog: false,
      intervalTime: '',
      intervalCount: '',
      stopTime: '',
      sleepFrom: '',
      sleepTo: '',
      tabs: [
        {
          route: 'new',
          label: '新建群发',
          name: 'NewGroupSend'
        },
        {
          route: 'history',
          label: '发送记录',
          name: 'GroupSendHistory'
        }
      ]
    }
  },
  components: {
    CustomDialog,
    HeaderTabs
  },
  methods: {
    closeDialog() {
      this.showSettingDialog = false
    },
    oepnSendSetting() {
      const that = this;
      this.showSettingDialog = true;
      this.$nextTick(()=>{
        layui.use('laydate', function(){
          const laydate = layui.laydate
          laydate.render({
            elem: '#startTime',
            trigger: 'click',
            type: 'time',
            lang: 'cn',
            min: 0,
            done(val) {
              that.sleepFrom = val
            }
          })
          laydate.render({
            elem: '#endTime',
            trigger: 'click',
            type: 'time',
            lang: 'cn',
            min: 0,
            done(val) {
              that.sleepTo = val
            }
          })
        })
      })
    },
    submitSetting() {
      console.log('interTime: ', this.intervalTime)
      console.log('interCount: ', this.intervalCount)
      console.log('stopTime: ', this.stopTime)
      console.log('sleepFrom:', this.sleepFrom)
      console.log('sleepTo:', this.sleepTo)
    }
  }
}
</script>
